<template>
    <div class="container">
        <div class="icon_div">
             <img class="input_icon" :src="require('../assets/'+this.img)"/>
            <input class="text_input" :type="password" :placeholder="plaStr" @input="valueChange" @blur="finsh" @focus="begin" v-model="Text" />
        </div>
        <div class="dissDiv">
             <button class="dissBtn" @click="DissBtnClick" v-show="ishsow">
                 <img class="dissBtn" src="../assets/login_icon_clean.png"/>
             </button>
        </div>
       
       
    </div>
</template>
<script>
    export default{
        name:'logiPut',
        data(){
            return {

                ishsow:false,
                Text:"",

        }
        },
        mounted(){


        },
        methods:{
            DissBtnClick(){
                this.ishsow = false;
                this.Text="";
                console.log("惦记事件");
            },
            valueChange()
            {
                if(this.Text.length>0) {
                    this.ishsow =true;
                }else
                {
                    this.ishsow = false;
                }

                console.log(this.Text);


            },
            finsh()
            {
                this.ishsow = false;
            },
            begin()
            {
                if(this.Text.length>0){
                this.ishsow = true;

                }else
                {
                this.ishsow = false;

                }
                
            }

        },

        props:{
            img:{
                type:String,
            },
            plaStr:{
                type:String,
            },
            password:{
                type:String,
            }

        }
    }
</script>

<style scoped>
.container{
    background-color: #F8F8F8;
  margin-top: 30px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  width: 80%;
  height: 50px;
  border-radius: 25px;
}
.icon_div
{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: start;
  margin-left: 25px;
  width: 80%;
  height: 100%;
}
.dissDiv
{
    margin-right: 25px;
    width: 20%;
    height: 100%;
    display: flex;  
  flex-direction: row;
  align-items: center;
    justify-content: end;

}
.input_icon{
height: 60%;
  width: auto;
}
.text_input{
color: #333333;
padding: 0;
margin-left: 10px;
border: none;
height: 100%;
width: 100%;
  background-color: rgba(0,0,0,0);
  outline: none;
}
.text_input::-webkit-input-placeholder
{
    color: #aaaaaa;
}
.text_input::-moz-placeholder
{
    color: #aaaaaa;
}
.dissBtn
{
    width: 40px;
    height: 40px;
    border: none;
    margin: 0px;
    padding: 0px;
    background-color: rgba(255,255,255,0);
}
</style>
